<template>
    <view v-if="visible" class="percentage-dialog-overlay" @click="handleOverlayClick">
        <view class="percentage-dialog" @click.stop>
            <view class="dialog-header">
                <text class="dialog-title">{{ title }}</text>
                <text class="close-btn" @click="handleCancel">×</text>
            </view>
            
            <view class="dialog-content">
                <view class="percentage-selector">
                    <text class="selector-label">选择开启进度：</text>
                    <picker 
                        :value="selectedIndex" 
                        :range="percentageOptions" 
                        range-key="label"
                        @change="onPickerChange"
                        class="percentage-picker">
                        <view class="picker-display">
                            {{ percentageOptions[selectedIndex].label }}
                        </view>
                    </picker>
                </view>
            </view>
            
            <view class="dialog-footer">
                <view class="btn btn-cancel" @click="handleCancel">取消</view>
                <view class="btn btn-confirm" @click="handleConfirm">确定</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'PercentageDialog',
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: '选择开启进度'
        },
        percentageOptions: {
            type: Array,
            default: () => [
                { value: 10, label: '10%' },
                { value: 20, label: '20%' },
                { value: 30, label: '30%' },
                { value: 40, label: '40%' },
                { value: 50, label: '50%' },
                { value: 60, label: '60%' },
                { value: 70, label: '70%' },
                { value: 80, label: '80%' },
                { value: 90, label: '90%' },
                { value: 100, label: '100%' }
            ]
        },
        defaultPercentage: {
            type: Number,
            default: 100
        }
    },
    data() {
        return {
            selectedIndex: 0
        }
    },
    watch: {
        visible(newVal) {
            if (newVal) {
                this.selectedIndex = this.getDefaultIndex()
            }
        },
        defaultPercentage(newVal) {
            this.selectedIndex = this.getDefaultIndex()
        }
    },
    methods: {
        getDefaultIndex() {
            const index = this.percentageOptions.findIndex(option => option.value === this.defaultPercentage)
            return index >= 0 ? index : this.percentageOptions.length - 1
        },
        onPickerChange(e) {
            this.selectedIndex = e.detail.value
        },
        handleConfirm() {
            const selectedPercentage = this.percentageOptions[this.selectedIndex].value
            this.$emit('confirm', selectedPercentage)
        },
        handleCancel() {
            this.$emit('cancel')
        },
        handleOverlayClick() {
            this.handleCancel()
        }
    }
}
</script>

<style lang="scss" scoped>
.percentage-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
}

.percentage-dialog {
    background-color: #fff;
    border-radius: 20rpx;
    box-shadow: 0 20rpx 80rpx rgba(0, 0, 0, 0.3);
    min-width: 600rpx;
    max-width: 750rpx;
    color: #333;
    margin: 40rpx;
}

.dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40rpx 60rpx;
    border-bottom: 2rpx solid #f0f0f0;
}

.dialog-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
}

.close-btn {
    font-size: 60rpx;
    color: #999;
    cursor: pointer;
    width: 80rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.3s;
    
    &:active {
        background-color: #f5f5f5;
    }
}

.dialog-content {
    padding: 60rpx;
}

.percentage-selector {
    display: flex;
    flex-direction: column;
    gap: 30rpx;
}

.selector-label {
    font-size: 28rpx;
    color: #666;
}

.percentage-picker {
    width: 100%;
}

.picker-display {
    padding: 30rpx 40rpx;
    background-color: #f8f8f8;
    border: 2rpx solid #e0e0e0;
    border-radius: 12rpx;
    font-size: 28rpx;
    color: #333;
    text-align: center;
    position: relative;
    
    &::after {
        content: '▼';
        position: absolute;
        right: 40rpx;
        top: 50%;
        transform: translateY(-50%);
        color: #999;
        font-size: 24rpx;
    }
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 30rpx;
    padding: 40rpx 60rpx;
    border-top: 2rpx solid #f0f0f0;
}

.btn {
    padding: 24rpx 60rpx;
    border-radius: 12rpx;
    font-size: 28rpx;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    min-width: 150rpx;
}

.btn-cancel {
    background-color: #f5f5f5;
    color: #666;
    border: 2rpx solid #e0e0e0;
    
    &:active {
        background-color: #e8e8e8;
    }
}

.btn-confirm {
    background-color: #2d6040;
    color: #fff;
    
    &:active {
        background-color: #1e4a2e;
    }
}
</style>
